<template>
	<div class="orderdetail_div">
		<div class="payheader_div">
			<span  class="btn_back" @click="btn_back">返回</span>
			订单详情
		</div>
		<div class="orderState_div">
			<p>等待付款</p>
			<p>剩余时间：20分40秒</p>
			<p class="orderState_btn" @click="btn_orderState">付 款</p>
		</div>
		<div class="detailInfo_div">
			<div class="detailInfo_img_div">
	    		<img src="../../assets/img/Bitmap.png" alt="" style="width: 100%;height: 100%;">
	    	</div>
	    	<div class="detailInfo_info">
	    		<p>巴厘岛一日游巴厘岛一日游巴厘岛一日游</p>
	    		<p>出行人群：成人</p>
	    		<p class="youlike_price">￥799</p>
	    	</div>
		</div>
		<div class="baseInfo_div">
			<p class="baseInfo_tip">基本信息</p>
			<p class="baseInfo_tip">
				<span class="fl">订单编号</span>
				<span class="fr tr">88789898897978</span>
			</p>
			<p class="baseInfo_tip">
				<span class="fl">下单时间</span>
				<span class="fr tr">2017-09-10</span>
			</p>
			<p class="baseInfo_tip">
				<span class="fl">交易时间</span>
				<span class="fr tr">2017-10-10</span>
			</p>
		</div>
		<p class="travelInfo">
			<span class="fl">出行时间</span>
			<span class="fr tr">2017-12-10	</span>
		</p>
		<div class="passengerInfo_div">
			<p class="baseInfo_tip">旅客信息</p>
			<ul>
			    <li>
			    	<p class="baseInfo_tip">旅客信息1</p>
					<p class="baseInfo_tip">
						<span class="fl">姓名</span>
						<span class="fr tr">姓名</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">性别</span>
						<span class="fr tr">女</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">出生日期</span>
						<span class="fr tr">2017-10-10</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">国籍</span>
						<span class="fr tr">中国</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">护照号码</span>
						<span class="fr tr">1111111111111</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">护照有效期</span>
						<span class="fr tr">2017-10-10</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">联系电话</span>
						<span class="fr tr">18210510973</span>
					</p>
			    </li>
			    <li>
			    	<p class="baseInfo_tip">旅客信息2</p>
					<p class="baseInfo_tip">
						<span class="fl">姓名</span>
						<span class="fr tr">姓名</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">性别</span>
						<span class="fr tr">女</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">出生日期</span>
						<span class="fr tr">2017-10-10</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">国籍</span>
						<span class="fr tr">中国</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">护照号码</span>
						<span class="fr tr">1111111111111</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">护照有效期</span>
						<span class="fr tr">2017-10-10</span>
					</p>
					<p class="baseInfo_tip">
						<span class="fl">联系电话</span>
						<span class="fr tr">18210510973</span>
					</p>
			    </li>
			</ul>
		</div>
		<div class="baseInfo_div">
			<p class="baseInfo_tip">联系信息</p>
			<p class="baseInfo_tip">
				<span class="fl">姓名</span>
				<span class="fr tr">啦啦啦</span>
			</p>
			<p class="baseInfo_tip">
				<span class="fl">手机号码</span>
				<span class="fr tr">12345678911</span>
			</p>
			<p class="baseInfo_tip">
				<span class="fl">电子邮箱</span>
				<span class="fr tr">kdlkald@qq.com</span>
			</p>
		</div>
	</div>
</template>
<script>
	
	export default{
		name: 'orderdetail',
		data(){
			return {
				//data_gouwucheId:'',
			}
		},
		
		components:{
			
        },
        methods:{
        	btn_back:function(){
				this.$router.go(-1);
			},
			//获取订单详情参数
			getOrDetail(){
				// this.data_gouwucheId = this.$route.params.goodId;
				// this.$store.dispatch("get_orderDetInfo",this);
				// console.log(this.$route.params)
			},
			btn_orderState:function(){
				console.log('fukuan')
			}
        },
        mounted:function(){
			this.getOrDetail()
		},
		watch:{
			"$route": "getOrDetail" 
		}
	}
</script>
<style rel="stylesheet" scoped>
	.orderdetail_div{
		padding-bottom: 1.3333rem;
	}
	.orderState_div{
		height: 2.9333rem;
		background: #2C7FDC;
		box-sizing: border-box;
		padding: 0 0.4rem;
		position: relative;
	}
	.orderState_div p:nth-child(1){
		padding-top: 0.8rem;
		height: 0.5867rem;
		line-height: 0.5867rem;
		font-size: 0.4267rem;
		color: #FFFFFF;
	}
	.orderState_div p:nth-child(2){
		padding-top: 0.2667rem;
		height: 0.48rem;
		line-height: 0.48rem;
		font-size: 0.3467rem;
		color: #D4E7FD;
	}
	.orderState_btn{
		position: absolute;
		width: 1.7333rem;
		height: 0.8rem;
		line-height: 0.8rem;
		border: 1px solid #FFFFFF;
		border-radius: 4px;
		color: #FFF;
		text-align: center;
		top: 1.0667rem;
    	right: 0.4rem;
    	font-family: PingFangSC-Regular;
		font-size: 0.3733rem;
	}
	.detailInfo_div{
		height: 3.3333rem;
		background-color: #FFF;
		margin-top: 0.2667rem;
		box-sizing: border-box;
		padding: 0.4rem;
		position: relative;
		padding-left: 4rem;
	}
	.detailInfo_img_div{
		width: 3.2rem;
		height: 2.4rem;
		position: absolute;
		top: 0.4rem;
		left: 0.4rem;
		border-radius: 0.1333rem;
	}
	.detailInfo_info{
		position: relative;
		width: 100%;
		height: 2.4rem;
	}
	.detailInfo_info p:first-child{
		height: 1.0667rem;
		line-height: 0.5333rem;
		font-size: 0.4rem;
		color: #323232;
	}
	.detailInfo_info p:nth-child(2){
		font-size: 0.3467rem;
		color: #A9A9A9;
	}
	.detailInfo_info p:last-child{
		font-size: 0.4rem;
		color: #FF7D37;
	}
	.baseInfo_div, .travelInfo, .passengerInfo_div{
		padding:0 0.4rem;
		box-sizing: border-box;
		background-color: #FFF;
		margin-top: 0.2667rem;
	}
	.baseInfo_tip, .travelInfo{
		height: 1.2rem;
		line-height: 1.2rem;
		overflow: hidden;
		border-bottom: 1px solid #F5F5F5;
	}
	.travelInfo{
		border-bottom: none;
	}
	.baseInfo_div p+p, .passengerInfo_div p+p{
		height: 1.0667rem;
		line-height: 1.0667rem;
		border-bottom: none;
	}
	.baseInfo_tip span:first-child{
		font-size: 0.3733rem;
		color: #A9A9A9;
	}
</style>